<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/allApp.css" />
		<link rel="stylesheet" href="../css/css.css" />
		<style type="text/css">
			body,
			.mui-content {
				background-color: #ffffff;
			}

			.mui-left.title {
				margin: 0;
				width: 78%;
			}

			.xj-content .mui-card-content {
				padding: 2px 2px 10px 2px;
			}

			.mui-card label {
				padding: 0;
			}

			.mui-content {
				padding-bottom: 70px;
			}

			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 7px;
			}

			.footerFix .mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}

			.footerFix {
				position: fixed;
				background: #fff;
				width: 100%;
				padding: 10px 0;
				bottom: 0;
				box-shadow: 0 -1px 6px #ccc;
				display: flex;
				align-items: center;
			}

			.footer-button {
				text-align: right;
			}

			.textalign {
				text-align: center;
			}

			.footer-button button {
				padding: 8px 17px;
				margin-right: 10px;
				border: 0px;
				border: 1px solid #cccccc;
			}

			.tjxj {
				/* margin-right: 5px; */
				border: 1px solid #cccccc;
				height: 34px;
				/* margin-top: 5px; */
				line-height: 34px;
				font-size: 13px;
				border-radius: 3px;
				width: 80px;
				text-align: center;
				position: absolute;
				right: 5px;
				top: 5px;
			}

			.tj2 {
				position: absolute;
				right: 21px;
				top: 5px;
				padding: 5px 0px;
				width: 70px;
				text-align: center;
			}

			.tj {
				position: absolute;
				right: 21px;
				top: 22px;
				padding: 5px 0px;
				width: 70px;
				text-align: center;
			}

			.addtj {
				border: 1px solid #cccccc;
				border-radius: 3px;
				color: #A4A4A4;
				padding: 2px 0px;
			}

			.wxj-list {
				width: 90%;
				margin-left: 5%;
				border-bottom: 1px solid #EEEEEE;
			}

			.mui-card-content {
				border-bottom: 0px !important;
			}

			.padleft38 {
				padding-left: 30px !important;
			}

			.martop10 {
				margin-top: 10px;
			}

			.titlesize {
				font-size: 14px !important;
			}

			.wxjflex {
				display: flex;
				flex-direction: column;
			}

			.wifi {
				width: 80%;
				margin: 100px auto;
				text-align: center;
			}

			.wifi img {
				width: 80%;
				margin-right: 20px;
			}

			.wifi p {
				font-size: 1rem;
			}

			.qd {
				border-radius: 4px;
				width: 80%;
				height: 44px;
				line-height: 44px;
				text-align: center;
				background-color: #0062CC;
				color: #ffffff;
				position: fixed;
				left: 10%;
				bottom: 20px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">设置人员</h1>
		</header>
		<div class="mui-content" id="content">
			<div class="xj-content" id="yulan" style="margin-bottom: 50px;">
				<div class="mui-card" style="position:relative">
					<div class="mui-input-row mui-checkbox wxj-list" v-for="(item,index) in data" :key="index">
						<label class="padleft38">
							<div class="mui-card-header">
								<div class="mui-left title">{{item.name}}</div>
							</div>
						</label>
						<input name="checkbox" style="left: 0px;" value="Item 2" type="checkbox" :data-id="(item.id)">
					</div>
				</div>
			</div>
		</div>
		<div class="qd">
			确定
		</div>
		<div class="footerFix mui-row" style="display: none;">
			<div class="mui-input-row mui-checkbox mui-left mui-col-sm-4 mui-col-xs-4">
				<label id="text">全选</label>
				<input name="checkbox" value="Item 2" type="checkbox" id="checkAll">
			</div>
		</div>
		<script src="../../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../../js/vue.js"></script>
		<script type="text/javascript" src="../../../js/mkeyplus.base.xunjian.js"></script>
		<script type="text/javascript" src="../../../js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="../../../js/common.js"></script>
		<script type="text/javascript" src="../../../js/uuid.js"></script>
		<script type="text/javascript">
			mui.init();
			var wind = "";
			window.vm = new Vue({
				el: "#content",
				data: {
					data: []
				},
				methods: {
					getPeople(type, id) {
						var that = this;
						mui.baseApp.httpRequst('/api/v2/sbxj/getUserList', {
								type: type,
								memberId: localStorage.getItem('userid'),
								datumId: id
							},
							function(rs) {
								console.log('人员。。。。。。' + JSON.stringify(rs));
								that.data = rs.data;
							}
						)
					}
				}
			});
			var from = '';
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				from = self.from;
				console.log('from='+from);
				vm.getPeople(self.type, self.iid);
			})

			var dataArr = [];
			//实现全选反选
			$("#checkAll").on('click', function() {
				var value = this.checked ? "true" : "false";
				dataArr = [];
				$(".mui-content input:checkbox").each(function() {

					if (!$(this).is(':disabled')) {
						$(this).prop('checked', $("#checkAll").prop('checked'));
					}
				})
				if (value == "true") {
					$("#text").text("全不选");
				} else {
					$("#text").text("全选");
				}

				console.log($(".mui-content input:checked").length);
				for (var i = 0; i < $(".mui-content input:checked").length; i++) {
					if (!$(".mui-content input:checked").eq(i).is(':disabled')) {
						var id = $(".mui-content input:checked").eq(i).attr('data-id');
						dataArr.push(id)
					}
				}
				console.log('dataArr' + dataArr)
			})



			$(".mui-content").on('change', "input:checkbox", function() {
				console.log('dataArr' + dataArr);
				var value = this.checked ? "true" : "false";
				var id = $(this).attr('data-id');
				if (value == "true") {
					dataArr.push(id);
					console.log("添加后。。。" + JSON.stringify(dataArr));
				} else {
					for (var i = 0; i < dataArr.length; i++) {
						if (dataArr[i] == id) {
							dataArr.splice(i, 1);
						}
					}
					console.log("移除后。。。" + JSON.stringify(dataArr));
				}
			})
			document.querySelector('.qd').addEventListener('tap',function () {
			    var opener = plus.webview.currentWebview().opener();
				if(from == 'syz'){
					opener = plus.webview.getWebviewById('dxjchild/syz_sub.html');
				}else if(from == 'sb'){
					opener = plus.webview.getWebviewById('dxjchild/sb_sub.html');
				}else{
					opener = plus.webview.getWebviewById('dxjchild/xl_sub.html');
				}
			    mui.fire(opener, 'refresh1',{persons:dataArr});    
				plus.webview.currentWebview().close();
			})
		</script>
	</body>

</html>
